<template>
  <div class="page">
    <a-form-model
      ref="boardForm"
      :model="formDataObject"
      :rules="rules"
      v-bind="layout"
    >
      <a-form-model-item label="选择模板">
        <a-radio-group
          :options="modelOptions"
          v-model="formData.modelType"
          @change="changeModel"
        />
      </a-form-model-item>
      <a-form-model-item label="二维码引导语" prop="codeTextList">
        <a-checkbox-group v-model="formDataObject.codeTextList">
          <a-checkbox value="1" name="type">引导语1 </a-checkbox>
          <div class="rule">
            <a-input
              :disabled="formDataObject.codeTextList.indexOf('1') == -1"
              autocomplete="off"
              placeholder="请输入引导语"
              :max-length="8"
              :style="{
                width: '300px',
                marginLeft: '10px',
                border:
                  checkValue &&
                  !formDataObject.qrCodeGuide &&
                  formDataObject.codeTextList.indexOf('1') > -1
                    ? '1px solid red'
                    : '',
              }"
              v-model="formDataObject.qrCodeGuide"
            />
            <span class="limitWords" v-if="formDataObject.qrCodeGuide"
              >{{ formDataObject.qrCodeGuide.length || 0 }}/8</span
            >
            <span class="limitWords" v-else>0/8</span>
          </div>

          <br />
          <a-checkbox value="2" name="type" style="margin-top: 30px"
            >引导语2
          </a-checkbox>
          <div class="rule">
            <a-input
              :disabled="formDataObject.codeTextList.indexOf('2') == -1"
              autocomplete="off"
              placeholder="请输入引导语"
              :max-length="12"
              :style="{
                width: '300px',
                marginLeft: '10px',
                border:
                  checkValue &&
                  !formDataObject.qrCodeGuide2 &&
                  formDataObject.codeTextList.indexOf('2') > -1
                    ? '1px solid red'
                    : '',
              }"
              v-model="formDataObject.qrCodeGuide2"
            />
            <span class="limitWords" v-if="formDataObject.qrCodeGuide2"
              >{{ formDataObject.qrCodeGuide2.length || 0 }}/12</span
            >
            <span class="limitWords" v-else>0/12</span>
          </div>
        </a-checkbox-group>
      </a-form-model-item>
      <a-form-model-item label="排序" prop="sort">
        <a-input-number
          :precision="0"
          v-model="formDataObject.sort"
          placeholder="填写整数"
          style="width: 200px"
        />
      </a-form-model-item>
      <a-form-model-item label="是否上架" prop="isUsed">
        <a-radio-group v-model="formDataObject.isUsed">
          <a-radio :value="1"> 是 </a-radio>
          <a-radio :value="0"> 否 </a-radio>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
    <div class="opration">
      <a-button type="primary" @click="comfirmPosterData"> 保存 </a-button>
      <a-button style="margin-left: 20px" @click="cancelOpration"
        >取消</a-button
      >
    </div>
  </div>
</template>
<script>
export default {
  name: "formPage",
  props: {
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    formDataObject() {
      switch (this.formData.modelType) {
        case 1:
          return this.formData.modelOne;
        case 2:
          return this.formData.modelTwo;
        case 3:
          return this.formData.modelThree;
        case 4:
          return this.formData.modelFour;
      }
    },
  },
  data() {
    return {
      checkBoxStyle: {
        display: "block",
        // height: "30px",
        // lineHeight: "30px",
      },
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
      },
      // formDataObject: {
      //   modelType: 1,
      //   codeTextList: [],
      //   qrCodeGuide: "",
      //   qrCodeGuide2: "",
      //   sort: "",
      //   isUsed: "1",
      // },
      rules: {
        modelType: [
          {
            required: true,
            message: "请选择模板",
            trigger: "change",
          },
        ],
        codeTextList: [
          {
            type: "array",
            required: true,
            message: "至少选择一个引导语",
            trigger: "change",
          },
        ],
        sort: [
          {
            required: true,
            message: "请填写排序",
            trigger: "change",
          },
        ],
        isUsed: [
          {
            required: true,
            message: "请选择是否上架",
            trigger: "change",
          },
        ],
      },
      modelOptions: [
        { label: "系统模板1", value: 1 },
        { label: "系统模板2", value: 2 },
        { label: "系统模板3", value: 3 },
        { label: "系统模板4", value: 4 },
      ],
      checkValue: false,
    };
  },
  methods: {
    comfirmPosterData() {
      console.log(this.formData);
      this.$refs.boardForm.validate((valid) => {
        if (valid) {
          this.checkValue = true;
          let num = 0;
          if (this.formDataObject.codeTextList.indexOf("1") > -1) {
            if (!this.formDataObject.qrCodeGuide) {
              num++;
            }
          }
          if (this.formDataObject.codeTextList.indexOf("2") > -1) {
            if (!this.formDataObject.qrCodeGuide2) {
              num++;
            }
          }
          if (num > 0) {
            this.$message.error("引导语不能为空");
            return;
          } else {
            // alert("submit!");
            console.log(this.formDataObject);
            let obj = JSON.parse(JSON.stringify(this.formDataObject));
            if (obj.codeTextList.indexOf("1") == -1) {
              obj.qrCodeGuide = "";
            }
            if (obj.codeTextList.indexOf("2") == -1) {
              obj.qrCodeGuide2 = "";
            }
            let params = {
              id: obj.id,
              qrCodeGuide: obj.qrCodeGuide,
              qrCodeGuide2: obj.qrCodeGuide2,
              name: obj.name,
              isUsed: obj.isUsed,
              sort: obj.sort,
            };

            console.log(params)
            this.updateModel(params);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancelOpration() {
      this.checkValue = false;
      this.$emit("canleUpdate");
    },
    changeModel() {
      this.$refs.boardForm.clearValidate();
      this.$emit("InitData");
    },
    //模板海报修改
    async updateModel(params) {
      let res = await this.$post(
        "goldenhome/gh/poster/admin_/poster/templet/update",
        params
      );
      if (res && res.returnCode == 1000) {
        // console.log(res);
        this.$message.success("保存成功");
        this.$emit("getBoardInit");
      }
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0;
  margin-top: 20px;
}
/deep/.ant-form-explain {
  margin-left: 30px;
}
.rule {
  display: inline-block;
  position: relative;
  // width: 400px;
  .limitWords {
    position: absolute;
    right: 6px;
    bottom: 4px;
    font-size: 10px;
    color: #ccc;
  }
}
.page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.opration {
  display: flex;
  justify-content: center;
}
</style>